.gems-tooltip {
    --gems-popover-bg-color: var(--gems-bg-color-overlay);
    --gems-popover-font-size: var(--gems-font-size-base);
    --gems-popover-border-color: var(--gems-border-color);
    --gems-popover-padding: 12px;
    --gems-popover-border-radius: 4px;
    display: inline-block;
  }
  
  .gems-tooltip {
    .gems-tooltip__popper {
      background: var(--gems-popover-bg-color);
      border-radius: var(--gems-popover-border-radius);
      border: 1px solid var(--gems-popover-border-color);
      padding: var(--gems-popover-padding);
      color: var(--gems-text-color-regular);
      line-height: 1.4;
      text-align: justify;
      font-size: var(--gems-popover-font-size);
      box-shadow: var(--gems-box-shadow-light);
      word-break: break-all;
      box-sizing: border-box;
      z-index: 1000;
      #arrow,
      #arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        box-sizing: border-box;
        background: var(--gems-popover-bg-color);
      }
      #arrow {
        visibility: hidden;
      }
      #arrow::before {
        visibility: visible;
        content: "";
        transform: rotate(45deg);
      }
      &[data-popper-placement^='top'] > #arrow {
        bottom: -5px;
      }
      
      &[data-popper-placement^='bottom'] > #arrow {
        top: -5px;
      }
      
      &[data-popper-placement^='left'] > #arrow {
        right: -5px;
      }
      
      &[data-popper-placement^='right'] > #arrow {
        left: -5px;
      }
      &[data-popper-placement^="top"] > #arrow::before {
        border-right: 1px solid var(--gems-popover-border-color);
        border-bottom: 1px solid var(--gems-popover-border-color);
      }
      &[data-popper-placement^="bottom"] > #arrow::before {
        border-left: 1px solid var(--gems-popover-border-color);
        border-top: 1px solid var(--gems-popover-border-color);
      }
      &[data-popper-placement^="left"] > #arrow::before {
        border-right: 1px solid var(--gems-popover-border-color);
        border-top: 1px solid var(--gems-popover-border-color);
      }
      &[data-popper-placement^="right"] > #arrow::before {
        border-left: 1px solid var(--gems-popover-border-color);
        border-bottom: 1px solid var(--gems-popover-border-color);
      }
    }  
  
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity var(--gems-transition-duration);
    }
  
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
  }